import React, { useState } from 'react';
import { Tabs, Card, Typography, Breadcrumb } from 'antd';
import { 
  SettingOutlined, 
  UserOutlined, 
  SafetyCertificateOutlined, 
  FileProtectOutlined, 
  GlobalOutlined,
  HomeOutlined
} from '@ant-design/icons';
import { Routes, Route, Link, useNavigate, useLocation } from 'react-router-dom';
import BasicSettings from './BasicSettings';
import SensitiveContentSettings from './SensitiveContentSettings';
import BlacklistSettings from './BlacklistSettings';

const { Title } = Typography;

const Settings = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const path = location.pathname;
  
  // 根据当前路径确定激活的Tab
  const getActiveKey = () => {
    if (path.includes('/sensitive')) return '2';
    if (path.includes('/blacklist')) return '3';
    return '1';
  };

  // 处理Tab切换
  const handleTabChange = (key) => {
    switch (key) {
      case '1':
        navigate('/admin/settings');
        break;
      case '2':
        navigate('/admin/settings/sensitive');
        break;
      case '3':
        navigate('/admin/settings/blacklist');
        break;
      default:
        navigate('/admin/settings');
    }
  };

  // 定义Tab项目
  const tabItems = [
    {
      key: '1',
      label: (
        <span>
          <SettingOutlined /> 基本设置
        </span>
      )
    },
    {
      key: '2',
      label: (
        <span>
          <SafetyCertificateOutlined /> 敏感内容设置
        </span>
      )
    },
    {
      key: '3',
      label: (
        <span>
          <FileProtectOutlined /> 黑名单管理
        </span>
      )
    }
  ];

  // 定义面包屑项目
  const breadcrumbItems = [
    {
      title: (
        <Link to="/admin">
          <HomeOutlined /> 管理中心
        </Link>
      )
    },
    {
      title: <><SettingOutlined /> 系统设置</>
    }
  ];

  return (
    <div className="settings-container">
      <Breadcrumb style={{ marginBottom: 16 }} items={breadcrumbItems} />
      
      <Title level={3}>系统设置</Title>
      
      <Tabs 
        activeKey={getActiveKey()} 
        onChange={handleTabChange}
        type="card"
        tabPosition="top"
        size="large"
        style={{ marginBottom: 16 }}
        items={tabItems}
      />
      
      <Routes>
        <Route path="/" element={<BasicSettings />} />
        <Route path="/sensitive" element={<SensitiveContentSettings />} />
        <Route path="/blacklist" element={<BlacklistSettings />} />
      </Routes>
    </div>
  );
};

export default Settings; 